<script lang="ts" setup>
import { ref, reactive, watch, provide } from "vue";
import { Apis } from "@/apis";
import { usePaging } from "@/hooks/usePaging";
import { useComments } from "@/hooks/useComments";
import searchFrom from "@/components/funcs/searchForm/searchFrom.vue";
import postDteail from "@/components/views/postDetail/postDteail.vue";
import tabOne from "@/components/funcs/tab_one/tabOne.vue";
import FuncShowConfirmBox from "@/utils/confirmBox";
import postComments from "@/components/funcs/postComments/postComments.vue";
const ApiParams: { content: string; title: string; type: string | number } =
  reactive({
    content: "",
    title: "",
    type: "all",
  });
const {
  data: postList,
  pages,
  total,
  pagesize,
  detailData,
  changePage,
  filterHandler,
  refreshData,
  getPostDetail,
  deletePost,
} = usePaging(Apis.getAllPostItems, ApiParams, 15);

//----
interface StatusItem {
  text: string;
  color: string;
}
const statusItems: StatusItem[] = reactive([
  {
    text: "审核中",
    color: "#e6a23c",
  },
  {
    text: "已通过",
    color: "#67c23a",
  },
  {
    text: "未通过",
    color: "#f56c6c",
  },
  {
    text: "社团老师审核中",
    color: "#e6a23c",
  },
]);
//----
const activeType = ref<number>(0);
const postTypes: string[] = reactive([
  "所有",
  "公告",
  "失物招领",
  "意见反馈",
  "社团活动",
]);
watch(activeType, (newVal) => {
  if (newVal === 0) {
    ApiParams.type = "all";
  } else {
    ApiParams.type = newVal - 1;
  }
  refreshData();
});
//-----
const postDetailRef = ref<InstanceType<typeof postDteail>>();
const showPostDetail = async (id: number): Promise<void> => {
  await getPostDetail(id);
  postDetailRef.value!.open();
};
//---
const handleDeletePost = (id: number): void => {
  FuncShowConfirmBox("确定删除吗？", () => {
    deletePost(id), postDetailRef.value!.close();
  });
};
//----
const {
  comments,
  total: totalComments,
  isLoaded,
  nextPage,
  getComments,
  getChildrenComments,
  createComment,
  refreshComment,
  clearComments
} = useComments(10);
const postCommentsRef = ref<InstanceType<typeof postComments>>();
const showPostComment = async (): Promise<void> => {
  console.log(detailData.value.id);
  await getComments(detailData.value.id);
  console.log(comments.value, "评论数组");
  postCommentsRef.value!.open();
};
provide("nextPage", nextPage);
provide("getChildrenComments", getChildrenComments);
provide("refreshComment", refreshComment);
provide("createComment", createComment);
provide("clearComments", clearComments);
provide("isLoaded", isLoaded);
</script>
<template>
  <div class="conPostTable">
    <postDteail :data="detailData" ref="postDetailRef">
      <el-button type="primary" plain @click="showPostComment"
        >展开评论</el-button
      >
    </postDteail>
    <postComments
      ref="postCommentsRef"
      :comments="comments"
      :total="totalComments"
    ></postComments>
    <div class="conTop">
      <div class="tableTitle">用户帖子列表</div>
      <div style="flex: 1"></div>
      <div class="bthFilter">
        <tabOne :tabList="postTypes" v-model="activeType"></tabOne>
      </div>
      <searchFrom
        v-model="ApiParams.content"
        @funcSearch="refreshData"
      ></searchFrom>
    </div>
    <el-table
      stripe
      style="width: 100%"
      height="63vh"
      highlight-current-row
      border
      :data="postList"
    >
      <el-table-column label="帖子id" prop="id" align="center" sortable>
      </el-table-column>
      <el-table-column
        label="帖子内容"
        prop="content"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column label="发布时间" prop="date" align="center" sortable>
      </el-table-column>
      <el-table-column label="帖子类型" align="center" prop="type">
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        prop="statu"
        :filters="[
          { text: '审核中', value: 0 },
          { text: '已通过', value: 1 },
          { text: '未通过', value: 2 },
          { text: '社团老师审核中', value: 3 },
        ]"
        :filter-method="filterHandler"
      >
        <template #default="scope">
          <div :style="{ color: statusItems[+scope.row.statu].color }">
            {{ statusItems[+scope.row.statu].text }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="评论数量"
        align="center"
        prop="commentNums"
        sortable
      >
      </el-table-column>
      <el-table-column label="作者" align="center" prop="User.username">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            plain
            @click="showPostDetail(scope.row.id)"
          >
            详情
          </el-button>
          <el-button
            size="small"
            type="danger"
            plain
            @click="handleDeletePost(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        display: flex;
        flex-direction: row-reverse;
        margin-right: 20px;
        height: 6vh;
      "
    >
      <el-pagination
        v-model:current-page="pages"
        size="large"
        layout="total,prev, pager, next, jumper"
        :total="total"
        :page-size="pagesize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.conPostTable {
  width: 100%;
  height: 70vh;
  background: #fff;
  margin-top: 15px;

  .conTop {
    height: 7vh;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    overflow-x: scroll;
    overflow-y: hidden;

    .tableTitle {
      width: 15%;
      text-align: center;
      line-height: 7vh;
      margin-left: 20px;
      font-weight: 550;
      font-size: 22px;
    }

    .bthFilter {
      width: 35%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 15px;
    }
    .conSearch {
      height: 7vh;
      margin-right: 20px;
      display: flex;
      align-items: center;
      padding-left: 30px;

      .el-button {
        margin-left: 10px;
      }
    }
  }
}
</style>
